import type { JueJinElements } from '../../../../../../types/constants'
import type {
  ApplyHeadingStyleOptions,
  ThemeFutureOptions,
  ThemeType,
} from '../../../../../../types/interfaces'
import { BlogThemeService } from '../../../../../../lib/abstract'
import { DEFAULT_COPY_BUTTON_ID } from '../../../../../../module/page_enhancer/content/copy_protection'
import { BODY_SELECTOR, generateHideSelector, PLATFORM_PAGE_TYPES, PROJECT_PREFIX, SUPPORTED_PLATFORMS } from '../../../../../../types/constants'
import { PAGE_CONTENT_WIDTH } from '../../../../../../types/constants/offical'

// TODO: 处理流程图
export class JueJinThemeService extends BlogThemeService {
  readonly name = 'jueJinTheme'
  readonly platformPageType: string = PLATFORM_PAGE_TYPES.BLOG.value
  private static instance: JueJinThemeService
  declare readonly elements: JueJinElements
  readonly futureOptions: ThemeFutureOptions = {
    followButton: true,
    options: {
      followButtonClassName: 'follow-button',
    },
  }

  readonly wrapperSelector: string = BODY_SELECTOR
  readonly applyHeadingStyleOptions: ApplyHeadingStyleOptions = {
    timeout: 1000,
    condition: false, // 标题样式生效增加延迟，避免没有启用文章目录功能时，标题样式类被清掉（具体原因未知）
  }

  readonly excludedTitleElementsSelectors: string[] = ['.article-title']
  readonly followClassName: string = 'follow-button'
  readonly pageWidth: string = PAGE_CONTENT_WIDTH

  constructor() {
    super(SUPPORTED_PLATFORMS.JUE_JIN)

    this.checkEnv()
    this.initExcludedTitleElementsSelectors(this.excludedTitleElementsSelectors)
    this.updateElementStylesForTheme()
  }

  /**
   * 获取单例实例
   */
  static getInstance(): JueJinThemeService {
    if (!JueJinThemeService.instance) {
      JueJinThemeService.instance = new JueJinThemeService()
    }
    return JueJinThemeService.instance
  }

  updateElementStylesForTheme(): void {
    super.updateElementStylesForTheme()

    // 克隆关注按钮
    const $originalFollowBtn = $('.follow-ctx.show')
    const $clonedFollowButton = $originalFollowBtn.clone(true)

    // 去掉元素属性等
    $clonedFollowButton.removeAttr('class').removeAttr('style').addClass(this.followClassName)
    // 重新绑定事件
    $clonedFollowButton.on('click', () => {
      $originalFollowBtn.trigger('click')
    })

    const $authorInfoBox = $('.author-info-box')

    if ($authorInfoBox.find(`.${this.followClassName}`).length === 0) {
      $authorInfoBox.append($clonedFollowButton)
    }
  }

  platformStyleVar(_theme: ThemeType): string {
    return ``
  }

  getPageStyles(_theme: ThemeType): string {
    return `
${BODY_SELECTOR} {
  background-color: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
}
/* 没有页眉时移除文章上边距 */
${BODY_SELECTOR}:has(${generateHideSelector('header')}) .main-container > div.view {
  margin-top: 0 !important;
}
`
  }

  getMainStyles(theme: ThemeType): string {
    const { CONTENT_CONTAINER } = this.elements

    let contentContainerStyle = ''
    if (CONTENT_CONTAINER && CONTENT_CONTAINER.selector !== '') {
      contentContainerStyle = `
${CONTENT_CONTAINER.selector} {
  width: ${this.pageWidth} !important;
  margin: 0 auto !important;
}
`
    }

    return `   
${contentContainerStyle}
/* 关注按钮 */
${this.getFollowButtonStyles(theme)}
`
  }

  getPatchedStyles(_theme: ThemeType): string {
    const { ARTICLE_WRAPPER } = this.elements

    return `
/* 使宽度增加的文章仍然居中 */
.main-area {
  width: 100% !important;
}

/* 使关注按钮在文章最右侧 */
.author-info-box {
  width: 100% !important;
  display: flex;
  align-items: center;
}

/* 避免文章内容与底部靠近 */
#article-root {
  margin-bottom: 15px !important;
}

/* 去掉文章自定义背景 */
${ARTICLE_WRAPPER.selector} {
  background-image: none !important;
}
`
  }

  getFixedStyles(_theme: ThemeType): string {
    return ``
  }

  customPreInnerStyles(_theme: ThemeType): string {
    return `
.code-block-extension-header {
  background-color: transparent !important;
}
.code-block-extension-lang, #${DEFAULT_COPY_BUTTON_ID} {
  color: var(--${PROJECT_PREFIX}-theme-code-text-common) !important;
}
#${DEFAULT_COPY_BUTTON_ID} {
  background-color: transparent !important;
}
`
  }
}
